import React, {useEffect} from 'react';
import './index.less';
import LeftContent from './components/LeftContent';
import MainContent from './components/MainContent';
import Form from './components/Form';

import useDrag from './useDrag';
import {useStores} from '@/store';
import {observer} from 'mobx-react-lite';

const Tab = () => {
    const {graphStore} = useStores();
    const {editDialogVisible} = graphStore;

    useEffect(() => {
        useDrag.initGraph(graphStore);
        useDrag.initDnd();
        useDrag.restoreData();
    }, []);

    return (
        <div className='wrapper'>
            {editDialogVisible && <Form />}
            <div className='wrap-container'>
                <LeftContent />
                <MainContent />
            </div>
        </div>
    );
};

export default observer(Tab);
